<template>
    <el-form ref="formRef" :model="formData" :rules="rules" label-width="120px" status-icon>
        <el-form-item label="名称" prop="name">
            <el-input v-model="formData.name"/>
        </el-form-item>
        <el-form-item label="图片" prop="img">
            <TukuVue v-model="formData.img1"></TukuVue>
            <TukuVue v-model="formData.img2"></TukuVue>
            <TukuVue v-model="formData.img3"></TukuVue>
        </el-form-item>
        <el-form-item label="分类" prop="parentId">
            <CategoryTreeVue v-model:modelValue="formData.categoryId"></CategoryTreeVue>
        </el-form-item>
        <el-form-item label="价格" prop="price">
            <el-input-number v-model="formData.price" :precision="2" :step="0.1" :min="0"/>
        </el-form-item>

        <el-form-item label="排序" prop="seq">

            <el-input-number v-model="formData.seq" :min="1" :max="99"/>
        </el-form-item>


        <el-tag
            v-for="tag in dynamicTags"
            :key="tag"
            class="mx-1"
            closable
            :disable-transitions="false"
            @close="handleClose(tag)"
        >
            {{ tag }}
        </el-tag>
        <el-input
            v-if="inputVisible"
            ref="InputRef"
            v-model="inputValue"
            class="ml-1 w-20"
            size="small"
            @keyup.enter="handleInputConfirm"
            @blur="handleInputConfirm"
        />
        <el-button v-else class="button-new-tag ml-1" size="small" @click="showInput">
            + New Tag
        </el-button>


        <el-form-item label="介绍">
            <EditorVue v-model="formData.brief"></EditorVue>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm(formRef)">
                新增
            </el-button>
            <el-button @click="resetForm(formRef)">重置</el-button>
        </el-form-item>
    </el-form>
</template>


<script setup lang="ts">
import {ref, onMounted, reactive, nextTick} from 'vue'
import {ElInput, ElMessage} from 'element-plus'
import {categoryApi, productApi} from '@/api'
import TukuVue from '@/components/Tuku.vue'
import {useRouter} from 'vue-router'
import EditorVue from '@/components/Editor.vue'
import CategoryTreeVue from "@/components/CategoryTree.vue";

const router = useRouter()
const formRef = ref()

const formData = reactive({
    name: '',
    img: '',
    img1: '',
    img2: '',
    img3: '',
    seq: 0,
    categoryId: 0,
    price: 0,
    brief: "请输入商品介绍"
})

const formSubmit = () => {
    let imgArray = []
    if (formData.img1 != "") {
        imgArray.push(formData.img1)
    }
    if (formData.img2 != "") {
        imgArray.push(formData.img2)
    }
    if (formData.img3 != "") {
        imgArray.push(formData.img3)
    }
    formData.img = imgArray.join(',')
    productApi.insert.call({
        name: formData.name,
        img: formData.img,
        seq: formData.seq,
        categoryId: formData.categoryId,
        price: formData.price,
        brief: formData.brief,
        tags:dynamicTags.value.join(',')
    }).then((res: any) => {
        ElMessage.success('新增成功')
    })
}

const submitForm = async (formEl: any) => {
    if (!formEl) return
    await formEl.validate((valid: any, fields: any) => {
        if (valid) {
            formSubmit()
        } else {
            console.log('error submit!', fields)
        }
    })
}
const resetForm = (formEl: any) => {
    if (!formEl) return
    formEl.resetFields()
}

const rules = reactive({
    name: [
        {required: true, message: '商品名称必填', trigger: 'blur'},
    ],


})






const inputValue = ref('')
const dynamicTags = ref(['新款', '活动'])
const inputVisible = ref(false)
const InputRef = ref<InstanceType<typeof ElInput>>()

const handleClose = (tag: string) => {
    dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1)
}

const showInput = () => {
    inputVisible.value = true
    nextTick(() => {
        InputRef.value!.input!.focus()
    })
}

const handleInputConfirm = () => {
    if (inputValue.value) {
        dynamicTags.value.push(inputValue.value)
    }
    inputVisible.value = false
    inputValue.value = ''

}



</script>